<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户管理</title>
<style type="text/css">
	.body{background-color: #A0DAF4;padding: 20px;position: relative;z-index: 1;}
	#div{background-color: #FFFFFF; }
	#divcuont{text-align:center; }
	.delete{display:none; font-size:11px;position: absolute;left:33%;top:225px; z-index: 100;padding:20px; background-color: #FFFFFF;border: 2px solid #323232;}
	.delete #OK{margin-right: 30px; width: 70px;}
	.delete #Cancel{margin-left: 30px;width: 70px;}
	#div table{padding: 5px;}
	#div table tr td{font-size:14px;border: solid 1px #C4C4C4;padding: 5px; text-align: center;}
	#query{background-color: #4293E9;color:#FFFFFF; width: 60px;padding: 2px;}
	#add{margin-left:7px;  padding: 5px;font-size: 14px;width: 100px; color:#0E4E6A; background-color: #B3DBF0;}
	.yincang{ z-index:9; background-color:#FFFBD8;padding:20px;position: absolute;line-height:35px;left:33%;top:225px;
	display: none;
	}
	.yincang #span{display:block;width:144px;margin: 0px auto;}
	.addRole{z-index:100; background-color:#FFFBD8;padding:20px;position: absolute;line-height:35px;left:33%;top:225px;
		display: none;	
	}
	#span{margin-left:50px; font-weight: bold;}
	#pageId a{padding:5px; text-decoration: none ; color:#515658;}
	#yufukuan{ position: absolute; left:30%;top:73px;}
</style>
</head>
<body>
	
	<div class="addRole">
			<span id="span">添加代理商用户信息</span>
			<hr>
			<form id="addUserRole">
			<label>登陆账号:</label><input type="text" id="zhanghao"><br/>
				<label>用户名称:</label><input type="text" id="name"><br/>
				<label>登陆密码:</label><input type="password" value="123456" id="mima"><br/>
				
				<label>角色:</label><select id="js">
										<option value="-1">--请选择--</option>
										<c:forEach items="${listrole }" var="role">
											<option value="${role.roleName }">${role.roleName }</option>
										</c:forEach>
									</select><br/>
				<label>是否启用:</label><select id="shifuqiyong">
					<option>启用</option>
					<option>不启用</option>
				</select>
				<input type="button" value="保存" id="save">
				<input type="button" value="取消" id="cancel">
			</form>
		</div>
		<div class="yincang">
			<span id="span">修改代理商用户信息</span>
			<hr>
			<form id="hiddenform">
			<label>登陆账号:</label><input type="text" id="hi"><br/>
				<label>用户名称:</label><input type="text" id="userName"><br/>
				<label>登陆密码:</label><input type="password" value="123456" id="password"><br/>
				
				<label>角色:</label><select id="chazhao">
										<option value="-1">--请选择--</option>
										<c:forEach items="${listrole }" var="role">
											<option value="${role.roleName }">${role.roleName }</option>
										</c:forEach>
									</select><br/>
				<label>是否启用:</label><select id="select">
					<option>启用</option>
					<option>不启用</option>
				</select>
				<input type="button" value="保存" id="baocun">
				<input type="button" value="取消" id="quxiao">
			</form>
		</div>
		
		<div class="delete">
			<p>您确定要删除【<span></span>】这个账号吗?</p>
			<hr>
				<input type="button" value="OK" id="OK">
				<input type="button" value="Cancel" id="Cancel">
		</div>
		
	<!-- 隐藏搜索 -->
	<form action="${ctx }/userManagement/role" method="post" id="juese">
		<input type="hidden" value="${listrole }" id="listyinchang">
		<input type="hidden" value="${usersguanli }" id="users">
	</form>
	
		<div class="body">
		<p>系统管理\<span>用户管理</span></p>
		<div id="div">
			<div id="divcuont">
				<label>用户名称:</label><input type="text" name="userName">
				<label>角色:</label>    <select id="xiala">
											<option >--请选择--</option>
											<c:forEach items="${listrole }" var="obj">
												<option value="${obj.id }">${obj.roleName }</option>
											</c:forEach>
											
									   </select>
				<label>是否启用:</label> <select>
											<option>启用</option>
											<option>未启用</option>
								       </select>				
				<input type="button" value="查询" id="query"  >
			
			</div>
			<div id="yufukuan">
			</div>
			<div id="">
			<br>
				<input type="button"  value="新增" id="add">
				<table>
					<thead>
						<tr style="background-color: #EAEAEA;font-weight: bold;">
							<td>登陆账号</td>
							<td>用户名称</td>
							<td>角色</td>
							<td>创建时间</td>
							<td>是否启用</td>
							<td>操作</td>						
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${usersguanli }" var="user">
							<tr>
								<td>${user.loginAccount }</td>
								<td>${user.loginName }</td>
								<td>${user.role }</td>
								<td><fmt:formatDate value="${user.createDateTime }" pattern="yyyy-MM-dd HH:mm:ss"/></td>
								<td>${user.status }</td>
								<td>
									<a href="#" onclick="xiugai(this)">修改</a>&nbsp;|
									<a href="#" onclick="deletes(this)">删除</a>&nbsp;|
									<a href="#" onclick="imprest(this)">预付款</a>&nbsp;|
									<a href="#" onclick="">LOG日志</a> 
								</td>
							</tr>		
						</c:forEach>	
						<tr>
							<td id="pageId" style="border: 1px solid #DDDDDD;">
								<a href="javascript:;" id="firstPage">首页</a>|
								<a href="javascript:;" id="prevPage">1</a>|
								<a href="javascript:;" id="nextPage">2</a>|
								<a href="javascript:;" id="lastPage">尾页</a>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	
	<script type="text/javascript" src="${ctx }/static/js/jquery-3.3.1.js"></script>
	<script type="text/javascript">

	$(function(){
		var yincang=$("#listyinchang").val();
		var users=$("#users").val();
		if(yincang == '' || users==''){
			$("#juese").submit();
		}
		
	})
		
		//新增==============================================================	
		$("#add").click(function(){
			$(".addRole").show();
		})
		$("#save").click(function(){
			var loginAccount=$("#zhanghao").val(); //账号
			var loginName=$("#name").val(); //用户名
			var loginPassword=$("#mima").val();//密码
			var role=$("#js").val();//角色
			var status=$("#shifuqiyong").val();  
			if(loginAccount == ''){
				alert('登陆账号不能为空!')
			}
			if(loginName == ''){
				alert('用户名称不能为空!')
			}
			if(loginPassword == ''){
				alert('登陆密码不能为空!')
			}
			if(role == '-1'){
				alert('请您正确选择角色!')
			}
			
			$.ajax({
				url:'${ctx}/userManagement/addUserData',
				type:'post',
				data:{ "loginAccount":loginAccount,"loginName":loginName,
					"loginPassword":loginPassword,"role":role,"status":status},
				dataType:'json',
				success:function(msg){
					alert(msg.name)
					window.location.reload(); //刷新本页面
					$(".addRole").hide();
				},
				error:function(){
					alert("请求出现问题了!")
				}
			})
			
		})
		$("#cancel").click(function(){
			$(".addRole").hide();
		})
			
		//修改数据======================================================
		function xiugai(obj){
			$(".yincang").show();
			$(".addRole").hide();
			$(".delete").hide();
			//获取表单的信息
			var td_content=$(obj).parents("tr").children("td");//获取当前行中的所有值
			var content=td_content.eq(0).text(); //根据当前的td下标进行获取
			var userName=td_content.eq(1).text();//登陆名称
			//隐藏的下拉列表
			$("#hi").val(content);
			$("#userName").val(userName);
		};
		//保存数据
		$("#baocun").click(function(){
			var loginAccount=$("#hi").val(); //账号
			var loginName=$("#userName").val(); //用户名
			var loginPassword=$("#password").val();//密码
			var role=$("#chazhao").val();//角色
			var status=$("#select").val();//是否启用
			
			if(loginAccount == ''){
				alert("账号不能为空!");
				return;
			}
			if(loginName == ''){
				alert("用户名不能为空!")
				return;
			}
			if(loginPassword == ''){
				alert("用户名不能为空!")
				return;
			}
			if(role == '-1'){
				alert("请选择角色!")
				return;
			}
			 
				$.ajax({
					url:'${ctx}/userManagement/updateRole',
					type:'post',
					data:{"loginAccount":loginAccount,"loginPassword":loginPassword,"loginName":loginName,"role":role,"status":status},
					datatype:'json',
					success:function(msg){
						alert(msg.name)
						window.location.reload(); //刷新本页面
					},
					error:function(){
						alert("请求出现问题了!")
					}
				})
			 
		});
		$("#quxiao").click(function(){
			$(".yincang").hide();
		})
		
		//删除数据=================================================================
			function deletes(num){
				$(".delete").show();
				var td_content=$(num).parents("tr").children("td");//获取当前行中的所有值
				var content=td_content.eq(0).text(); //根据当前的td下标进行获取
				$(".delete p span").text(content);
			
			}
		//准备删除数据
		$("#OK").click(function(){
			var loginAccount=$(".delete p span").text();
			$.ajax({
				url:'${ctx}/userManagement/deleteUserData/'+loginAccount,
				type:'post',
				dataType:'json',
				success:function(msg){
					alert(msg.name);
					window.location.reload(); //刷新本页面
				},
				error:function(){
					alert("请求出现问题了!");
				}
			})
			$(".delete").hide(); 
		})
		
		$("#Cancel").click(function(){
			$(".delete").hide();
		});
		
		//预付款========================================================
		function imprest(number){
			$("#yufukuan").load("${ctx}/pages/advance.jsp");
			
		}	
	</script>
</body>
</html>